<template>
	<view>
		<view class="comment">
			<view class="comment_top">
				<image class="comment_top_photo" src="../../../static/me/default.png" mode=""></image>
				<text class="comment_top_name">小憨儿</text>
				<text class="comment_top_name rightstaus">好评</text>
				<image class="comment_top_photo rightcomment" src="../../../static/me/Praise.png" mode=""></image>
			</view>
			<view class="comment_bottom">
				<view class="content_comment">
					描述真实，回复快，发货快，有赠品
				</view>
				<view class="comment_imgs">
					<image src="../../../static/me/default.png" mode=""></image>
					<image src="../../../static/me/default.png" mode=""></image>
					<image src="../../../static/me/default.png" mode=""></image>
					<image src="../../../static/me/default.png" mode=""></image>
					<image src="../../../static/me/default.png" mode=""></image>
				</view>
				<view class="comment_shop">
					<image src="../../../static/me/default.png" mode=""></image>
					<view class="comment_title">这里是商品名称这里是商品名称啊…</view>
					<view class="comment_money">¥2839.92</view>
				</view>
				<view class="comment_times">2021.03.15 15:15</view>
			</view>
		</view>
		<view class="comment">
			<view class="comment_top">
				<image class="comment_top_photo" src="../../../static/me/default.png" mode=""></image>
				<text class="comment_top_name">小憨儿</text>
				<text class="comment_top_name rightstaus">差评</text>
				<image class="comment_top_photo rightcomment" src="../../../static/me/difference.png" mode=""></image>
			</view>
			<view class="comment_bottom">
				<view class="content_comment">
					描述真实，回复快，发货快，有赠品
				</view>
				<view class="comment_shop">
					<image src="../../../static/me/default.png" mode=""></image>
					<view class="comment_title">这里是商品名称这里是商品名称啊…</view>
					<view class="comment_money">¥2839.92</view>
				</view>
				<view class="comment_times">2021.03.15 15:15</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	page {
		background: #F5F5F5;
	}

	.comment {
		width: 699rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 14rpx;
		margin: auto;
		margin-top: 21rpx;
	}

	.comment_top {
		width: 655rpx;
		margin-left: 21rpx;
		padding-top: 25rpx;
		height: 50rpx;
	}

	.comment_top_photo {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		margin-right: 18rpx;
		float: left;
	}

	.comment_top_name {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 50rpx;
		color: #21201D;
		opacity: 0.65;
	}

	.rightcomment {
		width: 36rpx;
		height: 36rpx;
		float: right;
		margin: 0;
	}

	.rightstaus {
		width: 54rpx;
		height: 32rpx;
		line-height: 32rpx;
		background: #FEF8E1;
		border-radius: 18rpx;
		float: right;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FE8000;
		opacity: 1;
		text-align: center;
		margin-top: 3rpx;
	}

	.comment_bottom {
		margin-right: 21rpx;
		margin-top: 14rpx;
		margin-left: 89rpx;
	}

	.content_comment {
		width: 224px;
		height: 20px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 20px;
		color: #21201D;
		opacity: 0.9;
		margin-bottom: 21rpx;
	}

	.comment_imgs {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.comment_imgs image {
		width: 105rpx;
		height: 105rpx;
		background: rgba(0, 0, 0, 0);
		opacity: 1;
		border-radius: 7rpx;
		margin-bottom: 21rpx;
	}

	.comment_shop {
		width: 583rpx;
		height: 144rpx;
		background: #F5F5F5;
		opacity: 1;
		border-radius: 7rpx;
	}

	.comment_shop image {
		width: 101rpx;
		height: 101rpx;
		padding: 21rpx;
		float: left;
	}

	.comment_title {
		width: 413rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.9;
		float: left;
		margin-top: 21rpx;
		margin-bottom: 28rpx;
	}

	.comment_money {
		width: 413rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #EB3E3E;
		opacity: 0.9;
		float: left;
	}
	.comment_times{
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.35;
		margin-top: 25rpx;
		padding-bottom: 36rpx;
	}
</style>
